<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时记录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        .nav {
            background-color: #333;
            overflow: hidden;
            padding: 0 20px;
        }
        .nav a {
            float: left;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        .nav a:hover {
            background-color: #ddd;
            color: black;
        }
        .nav a.active {
            background-color: #4CAF50;
            color: white;
        }
        .container {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        .records-table {
            width: 100%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-top: 2rem;
        }
        .records-table table {
            width: 100%;
            border-collapse: collapse;
        }
        .records-table th,
        .records-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        .records-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        .records-table tr:hover {
            background-color: #f9f9f9;
        }
        .summary {
            margin: 2rem 0;
            padding: 1rem;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .summary h2 {
            margin-top: 0;
            color: #333;
        }
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        .summary-item {
            padding: 1rem;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="index.html">计时器</a>
        <a href="records.html" class="active">记录</a>
        <a href="analysis.html">分析</a>
    </div>

    <div class="container">
        <div class="summary">
            <h2>统计摘要</h2>
            <div class="summary-grid">
                <div class="summary-item">
                    <h3>总计时时长</h3>
                    <p id="totalTime">计算中...</p>
                </div>
                <div class="summary-item">
                    <h3>记录总数</h3>
                    <p id="totalRecords">计算中...</p>
                </div>
            </div>
        </div>

        <div class="records-table">
            <h2>所有记录</h2>
            <table>
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>时长</th>
                        <th>活动</th>
                    </tr>
                </thead>
                <tbody id="recordsTableBody">
                </tbody>
            </table>
        </div>
    </div>

    <script>
        function parseTime(timeStr) {
            const [hours, minutes, seconds] = timeStr.split(':').map(Number);
            return hours * 3600 + minutes * 60 + seconds;
        }

        function formatTotalTime(totalSeconds) {
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;
            return `${hours}小时${minutes}分钟${seconds}秒`;
        }

        async function loadRecords() {
            try {
                const response = await fetch('/api/records');
                const records = await response.json();
                
                // 更新记录表格
                recordsTableBody.innerHTML = records
                    .map(record => `
                        <tr>
                            <td>${record.date}</td>
                            <td>${record.duration.replace('时长: ', '')}</td>
                            <td>${record.activity.replace('活动: ', '')}</td>
                        </tr>
                    `)
                    .join('');

                // 更新统计信息
                document.getElementById('totalRecords').textContent = records.length + ' 条';

                // 计算总时长
                let totalSeconds = 0;
                records.forEach(record => {
                    const timeStr = record.duration.replace('时长: ', '');
                    totalSeconds += parseTime(timeStr);
                });
                document.getElementById('totalTime').textContent = formatTotalTime(totalSeconds);

            } catch (error) {
                console.error('加载记录失败:', error);
            }
        }

        // 页面加载时获取记录
        loadRecords();
    </script>
</body>
</html> 